<template>
  <div class="component-div">
        <!-- 页面标题 -->
        <div class="page-title">
            <!-- 标题文本 -->
            <div class="title-text">
                待签约管理
            </div>
            <div class="blue-bar">
        </div>
        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 下面div 的 class自己写，例如class="doctor-management" -->
            <div class="home">
                <div class = "search">
                <label>签约状态：</label>
                <el-select style="margin:20px 70px 20px 5px;" v-model="search.state" clearable placeholder="" class="m-2" size="large">
                    <el-option v-for="item in stateOption" :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <label>签约机构：</label>
                <el-select style="margin:20px 70px 20px 5px;" v-model="search.oid" clearable placeholder="" class="m-2" size="large">
                    <el-option v-for="item in option.organization" :key="item.oid"
                        :label="item.name"
                        :value="item.oid">
                    </el-option>
                </el-select>
                <label>医生团队：</label>
                <el-select style="margin:20px 70px 20px 5px;" v-model="search.tid" clearable placeholder="" class="m-2" size="large">
                    <el-option v-for="item in option.team" :key="item.id"
                        :label="item.teamName"
                        :value="item.id">
                    </el-option>
                </el-select>
                <div>
                <label>服务包：</label>
                    <el-select style="margin:20px 70px 20px 5px;" v-model="search.sid" clearable placeholder="" class="m-2" size="large">
                        <el-option v-for="item in option.serviceTable" :key="item.id"
                            :label="item.servicePackageName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <label>选择日期：</label>
                    <el-date-picker
                        style="margin:20px 70px 20px 5px;"
                        v-model="date"

                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format = "YYYY-MM-DD HH:mm:ss"
                        >
                    </el-date-picker>
                    <el-button style="margin:20px 90px 20px 0px;" type="primary" @click="searchContract">导出</el-button>
                    <el-input
                        style="width: 450px;margin:20px 0 20px 0"
                        v-model="search.keyword"
                        @keyup="searchContract"
                        placeholder="请输入关键字">
                        <template #append>
                            <el-button :icon="Search" @click="searchContract"></el-button>
                        </template>
                    </el-input>

                </div>
                    
                </div>

                <el-table :data="pageInfo.list" stripe border style="width: 100%">
                    <el-table-column prop="contractID" label="编号" width="90px"/>
                    <el-table-column prop="name" label="签约人姓名" width="100px"/>
                    <el-table-column prop="idNumber" label="身份证号码" />
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="state" :formatter="stateFormat" label="签约状态" width="90px"/>
                    <el-table-column prop="teamName" label="签约医生团队" />
                    <el-table-column prop="serverPackageName" label="签约服务包" />
                    <el-table-column prop="reviewerTime" label="审核时间" />
                    <el-table-column fixed="right" label="操作" width="200px">
                    <template #default="scope">
                        <el-button type="success" @click="showContractDetailed(scope.$index)">查看详情</el-button>
                        <el-button type="primary" @click="showContractEdit(scope.$index)">编辑</el-button>
                    </template>
                </el-table-column>
                </el-table>

                <div style="padding-block: 10px;margin:20px auto;width:400px;height:100px">
                    <el-pagination background 
                        layout="prev, pager, next" 
                        :total="pageInfo.total"
                        :hide-on-single-page="true"
                        v-model:current-page="pageInfo.pageNum"
                        v-model:page-size="pageInfo.pageSize">
                    </el-pagination>
                </div>

                <el-dialog
                    v-model="editVisible"
                    title="编辑签约信息"
                    width="70%"
                    :before-close="handleClose">
                    <el-form label-position="top" :rules="contractRules" ref="modifyForm" :model="contractDetailedInformation" label-width="180px">
                        <h3>居民信息</h3>
                        <div class="detailed">
                            <div class="row">
                                <label></label>
                                <el-form-item label="居民姓名" prop="name">
                                    <el-input style="width:130px;font-size:17px" v-model="contractDetailedInformation.name" disabled />
                                </el-form-item>
                            </div>
                            <div class="row">      
                                <el-form-item label="身份证号" prop="idNumber">     
                                    <el-input style="width:260px;font-size:17px" v-model="contractDetailedInformation.idNumber"/>
                                </el-form-item>    
                            </div>
                            <div class="row">
                                <el-form-item label="性别" prop="gender">
                                    <el-select style="width:130px;font-size:17px" v-model="contractDetailedInformation.gender" placeholder="" class="m-2" size="large">
                                        <el-option style="width:130px;font-size:17px" v-for="item in genders" :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="出生年月" prop="birthday">
                                    <el-date-picker style="font-size:17px" value-format = "YYYY-MM-DD"  v-model="contractDetailedInformation.birthday" type="date" />
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input style="width:260px;font-size:17px" v-model="contractDetailedInformation.phone"/>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="现居地" prop="all">
                                    <el-input style="width:260px;font-size:17px" v-model="contractDetailedInformation.place"/>
                                </el-form-item>
                            </div>
                            <div class="row" >

                                <el-form-item label="居民标签" prop="all">
                                    <a style="margin: 10px 10px 30px 0px;" v-for="item in contractDetailedInformation.labels" :key="item.id">{{item.name}}</a>
                                    <!-- <el-select v-model="label" multiple>
                                        <el-option
                                            v-for="item in labels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                            >
                                        </el-option>
                                    </el-select> -->
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="家庭成员" prop="all">
                                    <a style="margin: 10px 10px 30px 0px;" v-for="item in contractDetailedInformation.familyMembers" :key="item.id">{{item.name}}</a>
                                </el-form-item>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <h3>签约信息</h3>
                        <div class="detailed">
                            <div class="row">
                                <el-form-item label="签约编号">
                                    <a>{{contractDetailedInformation.contractID}}</a>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="签约状态">
                                    <a>{{contractDetailedInformation.state == 0?"待审核":(contractDetailedInformation.state == 1?"待支付":"已驳回")}}</a>
                                </el-form-item>
                            </div>
                        <div class="row">
                                <el-form-item label="签约机构" prop="">
                                    <el-select style="width:270px" v-model="contractDetailedInformation.organizationName" placeholder="" class="m-2" size="large">
                                        <el-option v-for="item in option.organization" :key="item.oid"
                                            :label="item.name"
                                            :value="item.oid">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="签约团队" prop="">
                                    <el-select v-model="contractDetailedInformation.teamId" placeholder="" class="m-2" size="large">
                                        <el-option v-for="item in option.team" :key="item.id"
                                            :label="item.teamName"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="签约医生" prop="">
                                    <el-select v-model="contractDetailedInformation.doctorName" placeholder="" class="m-2" size="large">
                                        <el-option v-for="item in stateOption" :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="服务包" prop="">
                                    <el-select v-model="contractDetailedInformation.serverPackageId" placeholder="" class="m-2" size="large">
                                        <el-option v-for="item in option.serviceTable" :key="item.id"
                                            :label="item.servicePackageName"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="签约周期" prop="">
                                    <a>{{contractDetailedInformation.servicePeriod}}</a>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="费用" prop="">
                                    <a>￥{{contractDetailedInformation.servicePackagePrice}}</a>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="签约周期" prop="">
                                    <a>{{contractDetailedInformation.contractType == 1?"首次签约":"非首次签约"}}</a>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="申请时间" prop="">
                                    <a>{{contractDetailedInformation.applyDate}}</a>
                                </el-form-item>
                            </div>
                            <div class="row">
                                <el-form-item label="生效日期" prop="">
                                    <el-date-picker
                                        v-model="contractDetailedInformation.startDate"
                                        type="datetime"
                                        placeholder="请选择"
                                        value-format="YYYY-MM-DD"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="margin: 15px 0; ">
                                <el-form-item label="签约备注" prop="">
                                    <el-input
                                        v-model="signedRemarks"
                                        :rows="3"
                                        type="textarea"
                                        placeholder="请输入签约备注"
                                    />
                                </el-form-item>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <el-form-item>
                            <el-button type="primary" @click="modifyContract">提交</el-button>
                            <el-button @click="editVisible = false">取消</el-button> 
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <el-dialog
                        v-model="detailedVisible"
                        title="签约详情"
                        width="70%"
                        :before-close="handleClose">
                        <el-form label-position="left" ref="modifyForm"  :model="contractDetailedInformation" label-width="90px">
                            <!-- :rules="flowerRules" -->
                            <h3>居民信息</h3>
                            <div class="detailed">
                                <div class="row">
                                    <label>居民姓名:</label>
                                    <a href="">{{contractDetailedInformation.name}}</a>
                                </div>
                                <div class="row">
                                    <label>身份证号:</label>
                                    <a>{{contractDetailedInformation.idNumber}}</a>
                                </div>
                                <div class="row">
                                    <label>性别:</label>
                                    <a>{{contractDetailedInformation.gender == "MALE"?"男":"女"}}</a>
                                </div>
                                <div class="row">
                                    <label>年龄:</label>
                                    <a>{{age}}</a>
                                </div>
                                <div class="row">
                                    <label>联系电话:</label>
                                    <a>{{contractDetailedInformation.phone}}</a>
                                </div>
                                <div class="row">
                                    <label>现居地:</label>
                                    <a>{{contractDetailedInformation.place}}</a>
                                </div>
                                <div class="row" >
                                    <label>居民标签:</label>
                                    <a style="margin: 10px 10px 30px 0px;" v-for="item in contractDetailedInformation.labels" :key="item.id">{{item.name}}</a>
                                </div>
                                <div style="margin: 15px 0; ">
                                    <label>家庭成员:</label>
                                    <a style="margin: 10px 10px 30px 0px;" v-for="item in contractDetailedInformation.familyMembers" :key="item.id">
                                        {{item.name}};
                                        {{item.familyRole === 0?'姐妹':(item.familyRole === 1?'兄弟':(item.familyRole === 2?'配偶':(item.familyRole === 3?'父母':(item.familyRole === 4?'子女':''))))}}
                                    </a>
                                </div>
                            </div>
                            <el-divider></el-divider>
                            <h3>签约信息</h3>
                            <div class="detailed">
                                <div class="row">
                                    <label>签约编号:</label>
                                    <a>{{contractDetailedInformation.contractID}}</a>
                                </div>
                                <div class="row">
                                    <label>签约状态:</label>
                                    <a>{{contractDetailedInformation.state == 0?"待审核":(contractDetailedInformation.state == 1?"待支付":"已驳回")}}</a>
                                </div>
                                <div class="row">
                                    <label>签约机构:</label>
                                    <a>{{contractDetailedInformation.organizationName}}</a>
                                </div>
                                <div class="row">
                                    <label>签约团队:</label>
                                    <a>{{contractDetailedInformation.teamName}}</a>
                                </div>
                                <div class="row">
                                    <label>签约医生:</label>
                                    <a>{{contractDetailedInformation.doctorName}}</a>
                                </div>
                                <div class="row">
                                    <label>服务包:</label>
                                    <a>{{contractDetailedInformation.serverPackageName}}</a>
                                </div>
                                <div class="row">
                                    <label>签约周期：</label>
                                    <a>{{contractDetailedInformation.servicePeriod}}</a>
                                </div>
                                <div class="row">
                                    <label>费用:</label>
                                    <a>￥{{contractDetailedInformation.servicePackagePrice}}</a>
                                </div>
                                <div class="row">
                                    <label>签约类型:</label>
                                    <a>{{contractDetailedInformation.contractType == 1?"首次签约":"非首次签约"}}</a>
                                </div>
                                <div class="row">
                                    <label>申请时间:</label>
                                    <a>{{contractDetailedInformation.applyDate}}</a>
                                </div>
                                <div class="row">
                                    <label>生效日期:</label>
                                    <a>{{contractDetailedInformation.startDate}}</a>
                                </div>
                                <div v-if="state !== 0" class="row">
                                    <label>审核人：</label>
                                    <a>{{contractDetailedInformation.reviewer}}</a>
                                </div>
                                <div v-if="state !== 0" class="row">
                                    <label>审核时间：</label>
                                    <a>{{contractDetailedInformation.reviewerTime}}</a>
                                </div>
                                <div style="margin: 15px 0 30px" v-if="state === 2">
                                    <label>驳回原因：</label>
                                    <a>{{contractDetailedInformation.rejectMsg}}</a>
                                </div>
                                <div style="margin: 15px 0; ">
                                    <label>签约备注:</label>
                                    <a>{{contractDetailedInformation.signedRemarks}}</a>
                                </div>
                            </div>
                            <el-divider></el-divider>
                            <el-form-item>
                                <el-button v-if="state !== 2" type="primary" @click="detailedVisible = false,editVisible = true">编辑签约信息</el-button>
                                <el-button v-if="state === 1" type="success" >提醒支付</el-button>
                                <el-button v-if="state === 0" type="success" @click="modifyContractState(1)">审核通过</el-button>
                                <el-button v-if="state === 0" type="danger" @click="modifyContractState(2)">驳回</el-button>
                                <el-button @click="detailedVisible = false">返回</el-button> 
                            </el-form-item>
                        </el-form>
                </el-dialog>
            </div>
        </div>
      </div>
    </div>
   
</template>

<script>
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { mapActions } from 'vuex'
// import { eq } from '@/util/object'

export default {
    data(){
        return{
            Search,
            pageInfo : [],
            contractDetailedInformation:[],
            detailedVisible : false,
            editVisible : false,
            state : '',
            cIndex : '',
            keyword:'',
            search : {},
            labels :[],
            label : [],
            date : [],
            signedRemarks : '',
            startDate : '',
            stateOption : [
            {
                value: '0',
                label: '待审核',
            },{
                value: '1',
                label: '待支付',
            },{
                value: '2',
                label: '已驳回',
            }],
            option : {},
            genders : [{
                value: 'MALE',
                label: '男',
            },{
                value: 'FEMALE',
                label: '女',
            }],
            contractRules:{
                name:{required:true,message:"姓名不能为空",trigger:'blur'},
                gender:{required:true,message:"性别不能为空",trigger:'blur'},
                idNumber:{required:true,message:"身份证号不能为空",trigger:'blur'},
                birthday:{required:true,message:"出生日期不能为空",trigger:'blur'},
                phone:{required:true,message:"联系电话不能为空",trigger:'blur'},
            }
        }
    },
    created(){
        this.searchContract()
        this.getNeedfulList()
    },
    watch:{
        'pageInfo.pageNum'(value){
            this.searchContract(value)
        }
    },
    methods:{
        ...mapActions(['doGetServiceTableList','doModifyContractState','doGetContractPendingList','doGetOrganizationList','doGetLabelList','doGetTeamList','doModifyContractInformation']),
        searchContract(pageNum) {
            if(this.date !== null){
                this.search.sDate = this.date[0]
                this.search.eDate = this.date[1]
            }else{
                this.search.sDate = null
                this.search.eDate = null
            }
            this.search.pageNum = pageNum
            this.doGetContractPendingList(this.search).then(res => {
                console.info(res)
                this.pageInfo = res.data.data
            })
        },
        showContractDetailed(index){
            Object.assign(this.contractDetailedInformation,this.pageInfo.list[index])
            this.state = this.contractDetailedInformation.state
            this.getAge(this.contractDetailedInformation.birthday)
            this.detailedVisible = true
        },
        showContractEdit(index){
            Object.assign(this.contractDetailedInformation,this.pageInfo.list[index])
            this.state = this.contractDetailedInformation.state
            this.editVisible = true
        },
        getAge(b){
            let birthday = new Date(b)
            let d = new Date()
            this.age = d.getFullYear() - birthday.getFullYear() - (d.getMonth() < birthday.getMonth() || (d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate()) ? 1 : 0);
        },
        stateFormat(row, column){
            const state = row[column.property]
            switch (state){
               case 0: 
               return "待审核";
               case 1: 
               return "待支付";
               case 2: 
               return "已驳回";
            }  
        },
        modifyContractState(state){
            let query = {}
            query.state = state
            query.id = this.contractDetailedInformation.contractID
            if(state === 2 ){
                ElMessageBox.prompt('请输入驳回理由', '驳回理由', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    inputPattern: /[^ \f\n\r\t\v]/,
                    inputErrorMessage: '驳回理由不能为空',
                }).then(({ value }) => {
                    query.rejectMessage = value
                    // console.info(query.rejectMessage)
                    this.doModifyContractState(query).then((res) => {
                        if(res.data.code === 200){
                            this.searchContract()
                            this.detailedVisible = false
                            ElMessage({
                                message: res.data.msg,
                                type: 'success',
                            })
                        }
                    })     
                })
            }else{
                ElMessageBox.confirm('确定要审核通过吗？','审核确认',{
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                }).then(() => {
                    this.doModifyContractState(query).then((res) => {
                        if(res.data.code === 200){
                            this.searchContract()
                            this.detailedVisible = false
                            ElMessage({
                                message: res.data.msg,
                                type: 'success',
                            })
                        }
                    })
                })
            }      
        },
        getNeedfulList(){
            this.doGetOrganizationList().then(res => {
                this.option.organization = res.data.data
            })
            this.doGetLabelList().then(res => {
                Object.assign(this.labels,res.data.data)
            })
            this.doGetTeamList().then(res => {
                this.option.team = res.data.data
            })
            this.doGetServiceTableList().then(res => {
                this.option.serviceTable = res.data.data
            })

        },
        modifyContract(){
            // console.info(this.contractDetailedInformation)
            // this.contractDetailedInformation.labels = new Array(this.label.length)
            // for(let i = 0;i<this.label.length;i++){
            //     this.contractDetailedInformation.labels[i] = {}
            //     this.contractDetailedInformation.labels[i].id = this.label[i]
            // }
            ElMessageBox.confirm('确定要提交吗？','编辑确认',{
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning',
            }).then(() => {
                let query = {}
                query.residentId = this.contractDetailedInformation.residentId
                query.contractID = this.contractDetailedInformation.contractID
                query.organizationId = this.contractDetailedInformation.organizationId
                query.idNumber = this.contractDetailedInformation.idNumber
                query.gender = this.contractDetailedInformation.gender
                query.birthday = this.contractDetailedInformation.birthday
                query.phone = this.contractDetailedInformation.phone
                query.place = this.contractDetailedInformation.place 
                query.teamId = this.contractDetailedInformation.teamId 
                query.doctorId = this.contractDetailedInformation.doctorId
                query.serverPackageId = this.contractDetailedInformation.serverPackageId
                query.startDate = this.contractDetailedInformation.startDate  
                query.signedRemarks = this.contractDetailedInformation.signedRemarks
                query.state = this.contractDetailedInformation.state
                this.doModifyContractInformation(query).then((res) => {
                    if(res.data.code === 200){
                        this.searchContract()
                        this.editVisible = false
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        })
                    }
                })
            }) 
        }
    },
    
}
</script>
<style lang="less" scoped>
    .home{
        height: 1200px;
    }
    .search{
        margin-left: 80px;
    }
    .detailed{
        height: 50%;
        width: 90%;
        margin: 0 auto;
        label{
            font-size: 17px;
            margin-left: 20px;
        }
        a{
            margin: 10px 40px 30px 0px;
            font-size: 17px;
        }
        .row{
            display: inline-block;
            margin: 15px 55px; 
        }
        
    }
</style>
